<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>List Page</title>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>

    <style type="text/css">
        body {
            background-color:#00b38a;
            text-align:center;
        }
        .center{
            width:580px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
<div class="center">
    <form action="/add" id="user_info" method="get">
    <input type="hidden" name="id" value="" />
    <table border="1">
        <thead><tr><td colspan="2" id="rowOper">新增</td></tr></thead>
        <tr>
            <td>address:</td>
            <td><input type="text" name="address" value="" /></td>
        </tr>
        <tr>
            <td>name:</td>
            <td><input type="text" name="name" value="" /></td>
        </tr>
        <tr>
            <td>phone:</td>
            <td><input type="text" name="phone" value="" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" name="save" id="save" value="保存" />
            </td>
        </tr>
    </table>
    </form>
    <div id="list" style="margin-top:20px;">

    </div>
</div>
<script>
    var resumes = [];
    $.ajax({
        url:'/getListData',
        type:'get',
        data:{},
        success:function(list){
            resumes = list;
            setTable(list);
        }
    });
    var setTable = function(list){
        var tableRs = [];
        tableRs.push('<table border="1"> <tr> <th>ID</th><th>address</th><th>name</th><th>phone</th><th><a href="#" onclick="toAdd();">新增</a></th></tr>');
        for(var i in list){
            tableRs.push('<tr><td>'+list[i]['id']+'</td><td>'+list[i]['address']+'</td><td>'+list[i]['name']+'</td><td>'+list[i]['phone']+'</td>');
            tableRs.push('<td><a href="#" onclick="toEdit('+list[i]['id']+');">Edit</a> / <a href="#" onclick="toDelete('+list[i]['id']+');">Delete</a></td></tr>');
        }

        tableRs.push('</table>');
        $('#list').html(tableRs.join(''));
    };
    var toEdit = function(id){
        var row = {};
        for(var i in resumes){
            if(resumes[i]['id'] == id){
                row = resumes[i];
            }
        }
        $('#user_info').attr({'action':'/updateById'});
        $('#rowOper').html('编辑');
        $('input[name="id"]').val(id);
        $('input[name="address"]').val(row['address']);
        $('input[name="name"]').val(row['name']);
        $('input[name="phone"]').val(row['phone']);
    };

    var toAdd = function(){
        $('#user_info').attr({'action':'/add'});
        $('#rowOper').html('新增');
        $('input[name="id"]').val('');
        $('input[name="address"]').val('');
        $('input[name="name"]').val('');
        $('input[name="phone"]').val('');
    };

    var toDelete = function(id){
        if(!confirm('确定删除id为'+id+'的记录')){
            return false;
        }
        window.location.href = "/delete?id="+id;
    };
</script>
</body>
</html>
